<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./素材/fontawesome-free-6.7.1-web/css/all.min.css" rel="stylesheet" type="text/css" />
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        #A {
            width: 600px;
            margin: 0 auto;
            background-color: black;
        }

        #B {
            display: flex;
            flex-wrap: wrap;
        }

        #C {
            width: 33.33%;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid #CCC;
            box-shadow: 5px 5px 30px 2px #999;
        }

        #C .M {
            font-size: 40px;
            position: relative;
            top: 50px;
            left: 75px;
        }

        span {
            font-size: 25px;
            margin-top: 15px;
            margin-left: -25px;
            color: rgb(51, 48, 48);
        }

        a {
            text-decoration: none;
            color: #3f3e3e;
        }

        a:link {
            color: #e7e3e3;
        }

        a:hover {
            color: white;
        }
    </style>
</head>

<body>
    <div id="A">
        <div id="B">
            <div id="C">
                <a href="#" class="M">
                    <i class="fa-solid fa-mobile-screen-button"></i>
                    <br>
                    <span>选购手机</span>
                </a>
            </div>
            <div id="C">
                <a href="#" class="M">
                    <i class="fa-solid fa-gift"></i>
                    <br>

                    <span>企业团购</span>
                </a>
            </div>
            <div id="C">
                <a href="#" class="M">
                    <i class="fa-brands fa-facebook-f"></i>
                    <br>

                    <span>F码兑换</span>
                </a>
            </div>
        </div>
        <div id="B">
            <div id="C">
                <a href="#" class="M">
                    <i class="fa-solid fa-id-card"></i>
                    <br>

                    <span>身份认证</span>
                </a>
            </div>
            <div id="C">
                <a href="#" class="M">
                    <i class="fa-solid fa-repeat"></i>
                    <br>

                    <span>以旧换新</span>
                </a>
            </div>
            <div id="C">
                <a href="#" class="M">
                    <i class="fa-solid fa-money-bill-1"></i>
                    <br>

                    <span>话费充值</span>
                </a>
            </div>
        </div>
    </div>
</body>

</html>